<script setup>

import {useRoleById, useSysRoleMutations} from "@/composables/sys/role.js";
import {useMessage} from "naive-ui";
import RolePermissionTable from "@/views/sys/role/components/role-permission-table.vue";

const emits = defineEmits(["close"])
const formRef = ref(null)
const sysRoleMutations = useSysRoleMutations()
const message = useMessage()

const props = defineProps({
  show: {
    type: Boolean,
    required: false
  },
  id: {
    type: String
  }
})

const isEdit = computed(() => !!props.id)
// 加载详情
const idRef = computed(() => props.id)
const {data, isLoading} = useRoleById(idRef)

const defaultFormData = {
  id: null,
  name: '',
  code: '',
  remark: '',
  permissions: [],
}

const formData = ref({...defaultFormData})

const formRules = {
  name: [
    {required: true, message: '请输入角色名称', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入角色编码', trigger: 'blur'}
  ]
}

const close = () => {
  emits('close')
  formReset()
}

// 重置表单
const formReset = () => {
  formData.value = {...defaultFormData}
}

// 表单提交
const formSubmit = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (isEdit.value) {
        try {
          await sysRoleMutations.update.mutateAsync(formData.value)
          message.success('更新成功')
          close()
        } catch (e) {
          console.error(e)
        }
      } else {
        try {
          await sysRoleMutations.create.mutateAsync(formData.value)
          message.success('创建成功')
          close()
        } catch (e) {
          console.error(e)
        }
      }
    }
  })
}

const rolePermissionTableRef = ref(null)

watchEffect(() => {
  if (props.id && data.value && !isLoading.value) {
    formData.value = {...data.value.data}
  }
})

// 更新权限
const updatePermissions = (permissions) => {
  formData.value.permissions = permissions
}
</script>

<template>
  <n-drawer
      :show="show"
      :loading="isLoading"
      :default-width="800"
      :min-width="400"
      resizable
      @esc="close"
  >
    <n-drawer-content>
      <template #header>
        {{ isEdit ? '编辑用户' : '新增用户' }}
      </template>
      <n-form ref="formRef" :model="formData" :rules="formRules">
        <n-form-item label="角色名称" path="name">
          <n-input v-model:value="formData.name" placeholder="请输入角色名称"/>
        </n-form-item>
        <n-form-item label="角色编码" path="code">
          <n-input v-model:value="formData.code" placeholder="请输入角色编码"/>
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input
              type="textarea"
              :rows="4"
              v-model:value="formData.remark"
              placeholder="请输入备注"
          />
        </n-form-item>
        <n-form-item label="权限" path="permissions">
          <role-permission-table
              ref="rolePermissionTableRef"
              :default-value="formData.permissions"
              @on-change="updatePermissions"/>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button size="small" @click="close">关闭</n-button>
          <n-button size="small" type="primary" @click="formSubmit">确定</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>